import React, { Component } from 'react';
import service from '../../api'
import './BrandPros.scss'
import { withRouter } from 'react-router-dom';
import { Ellipsis } from 'antd-mobile'
class BrandPros extends Component<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            brandpros: [],
        }
    }
    async componentDidMount() {
        service.pro.getProCategorybrandprolist({
            brand: this.props.brand,
            category: this.props.category
        }).then(res => {
            this.setState({
                brandpros: res.data.data
            })
        })
    }
    // shouldComponentUpdate(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): boolean {
    //     console.log(nextProps,this.props)
    //     return true
    // }
    toDetails(proid: string) {
        this.props.history.push("/details/" + proid)
    }
    render() {
        return (
            <div className='brandpros'>
                {
                    this.state.brandpros.map((item: any, index: number) => {
                        // console.log(item)
                        return (
                            <div onClick={() => {
                                this.props.getbannerlist(item.banners[0].split(','))

                            }} className='brandpro' key={item.proid}>
                                <img src={item.img1} alt="" />
                                <button onClick={() => { this.toDetails(item.proid) }}>查看详情</button>
                                <Ellipsis direction='end' rows={1} content={item.proname} />
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default withRouter(BrandPros);